html {
    overflow: hidden;
}
.info-box {
    width: 100%;
    height: 100%;
    min-height: 768px;
    background-size: cover;
    position: relative;
    background-color: rgba(33, 157, 217, 1);
    .head-box {
        display: flex;
        height: 140px;
        // max-height: 180px;
        background: rgba(33, 157, 217, 1);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        .time-weather-box {
            display: flex;
            width: 400px;
            justify-content: center;
            align-items: center;
            color: #fff;
            .time-box {
                border-right: 2px solid #fff;
                padding-right: 26px;
                .time {
                    font-size: 46px;
                    text-align: center;
                    line-height: 66px;
                }
                .date {
                    font-size: 20px;
                    text-align: center;
                    line-height: 34px;
                }
            }
            .weather-box {
                margin-left: 10px;
                display: flex;
                align-items: center;
                
                img {
                    width: 120px;
                    height: 120px;
                }
                .info {
                    font-size: 30px;
                }
            }
        }
        .msg-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 30px;
            color: #fff;
            flex-wrap: wrap;
            align-items: center;
            .border-box {
                border-right: 2px solid #fff;
            }
            div {
                width: 100%;
                line-height: 50px;
            }
        }
        .tourists {
            width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 30px;
            color: #fff;
            flex-wrap: wrap;
            align-items: center;
            .number {
                font-size: 40px;
                .ren {
                    font-size: 20px;
                }
            }
        }
    }
    .content {
        height: 100%;
        padding-top: 140px;
        box-sizing: border-box;
        display: flex;
    }
    .left-box {
        width: 26%;
        max-width: 360px;
        min-width: 340px;
        height: 100%;
        background: rgba(33, 157, 217, 1);
        // position: absolute;
        // top: 0;
        // left: 0;
        padding: 20px 10px 0 20px;
        box-sizing: border-box;
        .one-box {
            display: flex;
            &:nth-of-type(1) {
                height: 40%;
            }
            &:nth-of-type(2) {
                height: 60%;
            }
            .con-box {
                margin-left: 10px;
                .title {
                    line-height: 40px;
                    font-size: 30px;
                    color: #fff;
                }
                .p1 {
                    font-size: 20px;
                    color: #fff;
                    line-height: 40px;
                    font-weight: bold;
                }
            }
        }
    }
    .img-box {
        flex: 1;
        height: 100%;
        #carousel-example-generic {
            height: 100%;
            width: 100%;
            .carousel-inner {
                height: 100%;
            }
        }
        img {
            max-height: 100%;
            max-width: 100%;
        }
    }
    .video-box {
        // width: 60%;
        flex: 1;
        // position: fixed;
        // top: 28%;
        // left: 35%;
        // height: 66%;
        // max-height: 600px;
        display: flex;
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        background-color: #000;
        video {
            // width: 100%;
            max-height: 100%;
            max-width: 100%;
        }
    }
}